<template>
    <div class="crm-talenter-container">
        <el-dialog title="人才详情" v-model="isShowDialog" width="95%" :close-on-click-modal="false" :style="{ minHeight: '500px' }">
            <el-tabs v-model="activeName" class="contract-detail">
                <el-tab-pane label="人才详情" name="talenter">
                    <el-descriptions :column="4" border>
                        <el-descriptions-item label="人才姓名">{{ talenter.talenterName }}</el-descriptions-item>
                        <el-descriptions-item label="身份证号码">{{ talenter.idNumber }}</el-descriptions-item>
                        <el-descriptions-item label="学历资质">{{ getDictionaryText('crm_qualification_type', talenter.qualification) }}</el-descriptions-item>
                        <el-descriptions-item label="许可证书">{{ getDictionaryText('crm_license_type', talenter.license) }}</el-descriptions-item>
                        
                        <el-descriptions-item label="开始时间">{{ talenter.signStartTime }}</el-descriptions-item>
                        <el-descriptions-item label="结束时间">{{ talenter.signEndTime }}</el-descriptions-item>
                        <el-descriptions-item label="账号名称">{{ talenter.account }}</el-descriptions-item>
                        <el-descriptions-item label="账号密码">{{ talenter.password }}</el-descriptions-item>

                        <el-descriptions-item label="手机号码">{{ talenter.mobile }}</el-descriptions-item>
                        <el-descriptions-item label="电话号码">{{ talenter.telephone }}</el-descriptions-item>
                        <el-descriptions-item label="邮箱号码" :span="2">{{ talenter.email }}</el-descriptions-item>
                        <el-descriptions-item label="审核状态">{{ examineStatusText(talenter.examineStatus) }}</el-descriptions-item>
                        
                        <el-descriptions-item label="到期状态">{{ expiryStatusText(talenter.expiryStatus) }}</el-descriptions-item>
                        <el-descriptions-item label="到期天数">
                            <span v-if="talenter.expiryDay == -99999"></span>
                            <span v-else-if="talenter.expiryDay >= 0">还有 {{ talenter.expiryDay }} 天到期</span>
                            <span v-else-if="talenter.expiryDay < 0" class="color-danger">已到期 {{ -talenter.expiryDay }} 天，请及时续期</span>
                        </el-descriptions-item>
                    </el-descriptions>
                    <el-descriptions :column="4" border class="mt15">
                        <el-descriptions-item label="创建者">{{ talenter.createBy }}</el-descriptions-item>
                        <el-descriptions-item label="创建时间">{{ talenter.createTime }}</el-descriptions-item>
                        <el-descriptions-item label="更新者">{{ talenter.updateBy }}</el-descriptions-item>
                        <el-descriptions-item label="更新时间">{{ talenter.updateTime }}</el-descriptions-item>
                        <el-descriptions-item label="所属用户">{{ talenter.userName }}</el-descriptions-item>
                        <el-descriptions-item label="所属部门">{{ talenter.deptName }}</el-descriptions-item>
                        <el-descriptions-item label="备注">{{ talenter.remark }}</el-descriptions-item>
                    </el-descriptions>
                    <el-carousel class="mt15" height="800px" :autoplay="false" v-if="talenter.attachments && talenter.attachments.length > 0">
                        <el-carousel-item v-for="item in talenter.attachments" :key="item">
                            <center>
                                <template v-if="item.url.toLowerCase().endsWith('.pdf')">
                                    <iframe :src="getStorageAccessTokenUrl(item.url)" width="100%" height="800px" frameborder="0"></iframe>
                                </template>
                                <template v-else>
                                    <el-image style="max-width: auto; height: 800px;" :src="getStorageAccessTokenUrl(item.url)" fit="contain" />
                                </template>
                            </center>
                        </el-carousel-item>
                    </el-carousel>
                </el-tab-pane>
                <el-tab-pane label="审核记录时间线" name="examineRecord">
                    <el-timeline>
                        <el-timeline-item
                            v-for="(item, index) in talenter?.examineRecord?.examineLoggers"
                            :key="index"
                            :timestamp="item.examineTime"
                            placement="top"
                        >
                            <el-row>
                                <el-col :span="6"><strong>审核人：</strong>{{ item.examineUserName }}</el-col>
                                <el-col :span="6"><strong>审核状态：</strong>{{ examineStatusText(item.examineStatus) }}</el-col>
                                <el-col :span="6"><strong>审核原由：</strong>{{ item.examineReason || '无' }}</el-col>
                            </el-row>
                        </el-timeline-item>
                    </el-timeline>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import { reactive, toRefs } from 'vue';
import { Session } from '/@/utils/storage';
import { getCrmTalenter } from '/@/api/crm/talenter/index';
import { getDictionaryByLabel } from '/@/api/system/dictionary/index';
export default {
    name: 'crm/talenter/info',
    setup(props, context) {
        const state = reactive({
            isShowDialog: false,
            activeName: 'talenter',
            talenter: {
                attachments: [],
                examineRecord: {
                    examineLoggers: []
                },
            },
            enterprises: [],
            dictionary: new Map(),
        });

        const examineStatusText = (status: String) => {
            const statusMap = {
                '0': '草稿',
                '1': '审核中',
                '2': '通过',
                '3': '驳回',
                '4': '撤回',
                '5': '作废'
            };
            return statusMap[status] || '未知';
        };
        const expiryStatusText = (status: String) => {
            const statusMap = {
                '0': '未到期',
                '1': '即将到期',
                '2': '已到期',
                '3': '已续期',
                '4': '已结束'
            };
            return statusMap[status] || '未知';
        };
        const getDictionaryText = (dictLabel: String, dictValue: String) => {
            const dictionarys = state.dictionary.get(dictLabel) || [];
            return dictionarys.find(item => item.dictValue == dictValue)?.dictName;
        };

        // 打开弹窗
        const openDialog = (row?: object) => {
            state.isShowDialog = true;
            if(row){
                getCrmTalenter({id: row.id}).then((res) => {
                    if(res.code == 0){
                        state.talenter = Object.assign({}, res.data);
                    }
                });
            }
            getDictionaryByLabel({ dictLabel: 'crm_qualification_type' }).then((res: any) => {
                if (res.code == 0) {
                    state.dictionary.set('crm_qualification_type', res.data);
                }
            });
            getDictionaryByLabel({ dictLabel: 'crm_license_type' }).then((res: any) => {
                if (res.code == 0) {
                    state.dictionary.set('crm_license_type', res.data);
                }
            });
            
        };
        // 关闭弹窗
        const closeDialog = (row?: object) => {
            state.isShowDialog = false;
            for(var key in state.formData) {
                state.formData[key] = undefined;
            }
        };
        const getStorageAccessTokenUrl = (url: String) => {
            return url + '?accessToken=' + Session.get('token');
        };

        return {
            openDialog,
            closeDialog,
            examineStatusText,
            expiryStatusText,
            getDictionaryText,
            getStorageAccessTokenUrl,
            ...toRefs(state),
        };
    },
};
</script>
<style scoped lang="scss">
.crm-talenter-container {
    :deep .el-descriptions .is-bordered-label {
        width: 100px !important; /* 固定宽度为 100px */
    }
}
</style>